<template>
  <!-- 中间部分 -->
  <div class="main">
    <div class="container">
      <div class="mi-cart page-main" v-show="isShopShop()">
        <div class="cart-container">
          <div class="container-main">
            <div class="cart-wrap">
              <div class="cart-goods-list">
                <div class="list-head clearfix">
                  <div class="col col-check">
                    <input type="checkbox" v-model="cheackAll" /> 全选
                  </div>
                  <div class="col col-img">&nbsp;</div>
                  <div class="col col-name">
                    <span>商品名称</span>
                  </div>
                  <div class="col col-price">单价</div>
                  <div class="col col-num">数量</div>
                  <div class="col col-total">小计</div>
                  <div class="col col-action">操作</div>
                </div>
                <div class="list-body">
                  <div class="list-item">
                    <div
                      class="item-box"
                      v-for="(item, index) in commodity"
                      :key="index"
                    >
                      <div class="item-table">
                        <div class="item-row clearfix">
                          <div class="col col-check">
                            <input type="checkbox" v-model="item.isCheck" />
                          </div>
                          <div class="col col-img">
                            <img :src="item.img" style="width:100%;height: 100%;"/>
                          </div>
                          <div class="col col-name">
                            <h3>
                              {{ item.title }}
                            </h3>
                          </div>
                          <div class="col col-price">
                            {{ item.unitPrice }}元
                          </div>
                          <div class="col col-num">
                            <div class="change-goods-num clearfix">
                              <a
                                href="javascript:void(0)"
                                @click="add(index), price(item.value)"
                                >-</a
                              >
                              <input type="text" v-model="item.value" />
                              <a
                                href="javascript:void(0)"
                                @click="item.value++, price(item.value)"
                                >+</a
                              >
                            </div>
                          </div>
                          <div class="col col-total">{{ item.price }}元</div>
                          <div class="col col-action">
                            <a href="javascript:void(0)" @click="del(item.id)"
                              >删除</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="placeholder-div"></div>
                <div class="cart-bar clearfix">
                  <div class="section-left">
                    <a href="javascript:void(0)" class="back-shopping"
                      >继续购物</a
                    >
                    <span class="cart-total">
                      已选择 <i>{{ doneTotal }}</i> 件
                    </span>
                  </div>
                  <span class="total-price">
                    合计:
                    <em> {{ total }} </em>
                    元
                    <a
                      @click="toSubmit"
                      href="javascript:void(0)"
                      class="btn btn-a btn-primary"
                      v-loading.fullscreen.lock="fullscreenLoading"
                    >
                      <p>去结算</p>
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-empty description="请添加商品" v-show="isShopNull()" />
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  name: "mmain",
  data() {
    return {
      value: 1,
      a:[],
      fullscreenLoading: false,
      commodity: this.$store.state.shopCart,
      // cheackAll:false,
    };
  },
  computed: {
    doneTotal() {
      let sum = 0;
      this.commodity.forEach((el) => {
        if (el.isCheck) {
          sum += el.value;
        }
      });
      return sum;
    },
    cheackAll: {
      get() {
        return this.commodity.every((el) => el.isCheck);
      },
      set(val) {
        // 全选的状态true、false两种状态
        // val为true即全选的时候、下方每一个isCheck也是true
        // val为false即全选的时候、下方每一个isCheck也是false
        return this.commodity.forEach((el) => (el.isCheck = val));
      },
    },
    total() {
      let sum = 0;
      // this.commodity.forEach((el) => {
      //   if (el.isCheck) {
      //     sum += el.price + sum;
      //   }
      // });
      for (let i in this.commodity) {
        if (this.commodity[i].isCheck) {
          sum = this.commodity[i].price + sum;
        }
      }
      return sum;
    },
  },
  methods: {
    toSubmit() {
      let sum = 0;
      for (let i in this.commodity) {
        if (this.commodity[i].isCheck) {
          // this.$store.commit('add',this.commodity[i]),
          // this.$store.commit('sum',this.total)
          sum++;
        }
      }
      if (sum == 0) {
        ElMessage({
          message: "请选择商品",
          type: "error",
        });
      } else {
        for (let i in this.commodity) {
          if (this.commodity[i].isCheck) {
            this.$store.commit("add", this.commodity[i])
              // this.$store.commit("sum", this.total);
          }
        }
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
          this.$router.push("order");
        }, 1000);
          this.a = this.$store.state.shopCart.filter(i=> i.isCheck != true)
          this.$store.commit('chan',this.a)
      }
    },
    isShopNull() {
      if (this.commodity.length > 0) {
        return false;
      } else {
        return true;
      }
    },
    isShopShop() {
      if (this.commodity.length > 0) {
        return true;
      } else {
        return false;
      }
    },
    add(index) {
      if (this.commodity[index].value > 0) {
        this.commodity[index].value--;
      }
    },
    price() {
      this.commodity.forEach((item) => {
        item.price = item.unitPrice * item.value;
      });
    },
    //校验两个商品是否一致
    isAgreement(){
        for(let i=0;i< this.commodity.length;i++){
          for(let j=i+1;j<this.commodity.length;j++){
            if(this.commodity[i].id == this.commodity[j].id){
              this.commodity.splice(this.commodity[i],1);
              this.commodity[i].value++
            }
          }
        }
    },
    //删除功能
    del(id) {
      this.$confirm("确定删除该商品？", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(
        () => {
          this.commodity = this.commodity.filter((item) => item.id !== id);
        },
        (err) => {
          return err;
        }
      );
    },
  },
  mounted() {
    this.price();
    this.isAgreement();
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #757575;
}
.main {
  background: #f5f5f5;
  font-size: 14px;
  color: #424242;
}
.container {
  width: 1280px;
  margin-right: auto;
  margin-left: auto;
}
.page-main {
  padding: 38px 0;
}
.cart-goods-list {
  background-color: #fff;
}
.list-head {
  height: 70px;
  line-height: 70px;
  padding-right: 26px;
  color: #424242;
}
.col {
  float: left;
}
.col-check {
  width: 110px;
}
.col-img {
  width: 120px;
}
.col-name {
  width: 380px;
  text-align: left;
}
.col-price {
  width: 140px;
  padding-right: 18px;
  text-align: center;
}
.col-num {
  width: 150px;
}
.col-total {
  width: 120px;
  padding-right: 81px;
  text-align: right;
}
.col-action {
  width: 80px;
  text-align: center;
  margin-left: 20px;
}
.item-box {
  padding: 15px 26px 15px 0;
  border-top: 1px solid #e0e0e0;
}
.item-table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}
.item-row {
  display: table-row;
  *zoom: 1;
}
.item-box .col-check {
  height: 80px;
  line-height: 80px;
}
.item-box .col {
  display: table-cell;
  vertical-align: middle;
}
.item-box .col-img {
  width: 80px;
  height: 80px;
  padding-right: 40px;
  overflow: hidden;
}
.item-box .col-name {
  margin-top: 28px;
  font-size: 16px;
  font-weight: 0;
}
.item-box .col-price {
  font-size: 16px;
  margin-top: 30px;
}
.item-box .col-num {
  font-size: 16px;
  margin-top: 23px;
}
.change-goods-num {
  width: 148px;
  height: 38px;
  border: 1px solid #e0e0e0;
  text-align: center;
  background-color: #fff;
  position: relative;
  zoom: 1;
}
.change-goods-num a {
  float: left;
  width: 38px;
  height: 38px;
  line-height: 38px;
  color: #757575;
  font-size: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.change-goods-num input {
  float: left;
  width: 72px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  border-width: 0;
  color: #424242;
  font-size: 16px;
  text-align: center;
  outline: none;
}
.item-box .col-total {
  color: #ff6700;
  font-size: 16px;
  margin-top: 30px;
}
.item-box .col-action {
  width: 80px;
  text-align: center;
  margin-top: 30px;
}
.item-box .col-action a:hover {
  color: #ff6700;
}
.cart-bar {
  height: 50px;
  line-height: 50px;
  text-align: right;
  background-color: #fff;
  -webkit-transition: background 0.3s ease, top 0.3s ease;
  transition: background 0.3s ease, top 0.3s ease;
  position: relative;
}
.placeholder-div {
  margin: 0px 0;
  width: 100%;
  height: 20px;
  background: #f5f5f5;

  padding: 0;
}
.section-left {
  float: left;
}
.back-shopping {
  line-height: 50px;
  margin-left: 32px;
}
.cart-total {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #eee;
  color: #757575;
}
.cart-total i {
  color: #ff6700;
  font-style: normal;
}
.total-price {
  padding-left: 13px;
  color: #ff6700;
}
.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  /* -webkit-transition: all .4s; */
  /* transition: all .4s; */
}
.total-price em {
  font-style: normal;
  font-size: 30px;
}
.total-price .btn {
  width: 200px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  margin-left: 50px;
  vertical-align: top;
}
.total-price .btn-primary {
  background: #ff6700;
  border-color: #ff6700;
  color: #fff;
}
.total-price a:hover {
  background: #f25807;
}
</style>